<!--
 * @Author: your name
 * @Date: 2020-12-18 17:09:32
 * @LastEditTime: 2020-12-19 16:49:25
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Editncli
 * @FilePath: \basicjs\event\basic.html
-->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件基础</title>
</head>
<body>
    <!--可以在html元素上设置事件处理程序,浏览器解析后会绑定到DOM属性中-->
    <!-- <button onclick="alert(`houdunren.com`)">后盾人</button> -->
    <!--往往事件处理程序业务比较复杂,所以绑定方法或者函数会有常见-->
    <!--绑定函数或者方法的时候需要加上括号-->
    <!-- <button onclick="show()">后盾人</button>

    <input type="text" onkeyup="HD.show()"> -->

    <!-- <button onclick="show(this,event)">后盾人</button> -->

    <div id="app">houdunren.com</div>

    <button id="hd">删除事件</button>


    <button id="recover">恢复点击事件</button>
    
    <script>
        // function show(){
        //     alert('houdunren.com');
        // }

        // //当然也可以使用方法作为事件处理程序
        // class HD {
        //     static show(){
        //         console.log('houdunren');
        //     }
        // }

        //第一个是当前的dom对象
        //当前的操作事件
        // function show(bt,event){
        //     console.log(event);
        // }

        //DOM绑定
        //可以将事件处理程序绑定到DOM属性中
        
        //使用setAttribute方法设置的事件处理程序无效
        //属性名区分大小写
        
        // const app = document.querySelector(`#app`);
        // app.onclick = function(){
        //     this.style.color = 'red';
        // }

        //无法为事件类型绑定多个事件处理程序,下面绑定了多个事件处理程序
        //因为属性是相同的所以只有最后一个有效
        // const app = document.querySelector(`#app`);
        // app.onclick = function(){
        //     this.style.color = 'red';
        // }
        // app.onclick = function(){
        //     this.style.fontSize = '55px';
        // }

        //事件监听
        //使用addEventListener来处理多个事件处理程序
        //可以使用addEventListener处理多个事件处理程序的时候,会按照顺序执行
        // const app = document.querySelector(`#app`);
        // app.addEventListener('click',function(){
        //     this.style.color = 'red';
        // });
        // app.addEventListener('click',function(){
        //     setTimeout(() => {
        //         app.style.fontSize = '55px';
        //     }, 2000);
        // });



        //对象绑定
        //如果事件处理程序可以是对象,对象的handleEvent方法会作为事件处理程序执行，下面的元素的事件统一交给对象处理
        // const app = document.querySelector(`#app`);
        // class HD{
        //     //每次在进行点击的时候都会首先执行
        //     handleEvent(e){
        //         console.log(e.type);
        //         this[e.type](e);
        //     }

        //     click(){
        //         console.log('单击事件');
        //     }

        //     mouseover(){
        //         console.log('鼠标移动事件');
        //     }
        // }

        // app.addEventListener('click',new HD());
        // app.addEventListener('mouseover',new HD());

        //removeEventListener
        //使用removeEventListener删除绑定的事件处理程序
        
        
        //使用addEventListener添加事件
        //使用removeEventListener 进行事件的删除

        const app = document.querySelector(`#app`);
        const hd = document.querySelector(`#hd`);   
        const recover = document.querySelector(`#recover`);

        //事件处理程序单独定义函数或者方法，这可以保障事件处理程序是同一个
        function show(){
            console.log('App我执行了');
        }

        app.addEventListener('click',show);

        hd.addEventListener('click',function(){
            app.removeEventListener('click',show);
        });

        recover.addEventListener('click',function(){
            app.addEventListener('click',show);
        });

        //进行事件的恢复
        

        


       
    </script>
</body>
</html>